<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Django下利用Uploadify组件上传图片</title>
    <link href="/media/plugin/uploadify214/uploadify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="/media/plugin/uploadify214/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/media/plugin/uploadify214/swfobject.js"></script>
    <script type="text/javascript" src="/media/plugin/uploadify214/jquery.uploadify.v2.1.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#file_upload').uploadify({
                'uploader'  : '/media/plugin/uploadify214/uploadify.swf',
                'script'    : '{%url uploadify_script%}',
                'cancelImg' : '/media/plugin/uploadify214/cancel.png',
                'folder'    : '/upload',
                'auto'      : false,//
                'multi': true,//设置可以上传多个文件
                'queueSizeLimit':128,//设置可以同时20个文件
                'removeCompleted':false,//
                'sizeLimit':10240000,//设置上传文件大小单位kb
                'fileExt':'*.jpg;*.gif;*.png;*.bmp;',//设置上传文件类型为常用图片格式
                'fileDesc':'Image Files',
                'onInit': function () {},
                'onError' : function (event,ID,fileObj,errorObj) {
                    $('#id_span_msg').html("上传失败，错误码:"+errorObj.type+" "+errorObj.info);
                },
                'onSelect': function (e, queueId, fileObj) {
                    $('#id_span_msg').html("");
                },
                'onAllComplete': function (event, data) {
                    if(data.filesUploaded>=1){
                        $('#id_span_msg').html("上传成功！");
                    }
                }
            });
        });
    </script>
</head>
<body>

<h1>Uploadify组件上传方式</h1>
<div class="demo-box">
    <input id="file_upload" type="file" name="Filedata">

    <div id="file_uploadQueue" class="uploadifyQueue"></div>
    <p><a href="javascript:$('#file_upload').uploadifyUpload()">上传图片</a>
        <a href="javascript:$('#file_upload').uploadifyClearQueue()">取消上传</a>
    </p>
    <p><span id="id_span_msg"></span></p>
</div>
</body>
</html>